<template>
   <div class="content">
   <el-form
       ref="formRef"
       style="max-width: 600px"
       :model="formData"
       :rules="rules"
       label-width="100px"
       class="demo-ruleForm"
       status-icon
     >
       <el-form-item label="类目名称" prop="name" style="margin-top: 10px;">
         <el-input v-model="formData.name" />
       </el-form-item>
      <el-form-item label="图片" prop="img">
            <!-- <el-input v-model="formData.img" /> -->
            <Tuku v-model="formData.img"></Tuku>
      </el-form-item>
      <el-form-item label="排序" prop="seq">
               <!-- <el-input v-model="formData.img" /> -->
            <el-input-number v-model="formData.seq" :min="1" :max="10"/>
      </el-form-item>
      
      <el-form-item label="父关联ID" prop="parentId">
             <el-tree-select
               v-model="formData.parentId"
               :data="cateGorydata"
               :render-after-expand="true"
               style="width: 240px"
            />
      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm(formRef)">
           提交
         </el-button>
         <el-button @click="resetForm(formRef)">重置</el-button>
       </el-form-item>
     </el-form>
     </div>
</template>
<script setup lang="ts">
import { CategoryApi } from '@/api';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
//路由跳转 不传递参数
import { useRouter } from 'vue-router';
import Tuku from '@/components/Tuku.vue';

const router=useRouter()
const formRef=ref()
const formData = reactive({
   name: '',
   img: '',
   seq: 0,
   parentId:0
})
const cateGorydata = ref([
   {
      value: 0,
      label:'一级目录'
   }
])

const rules = reactive({
   name: [
      { required: true, message: '类目的名称是必填项', trigger: 'blur' },
      // { min: 3, max: 10, message: '必须输入3-5个字符', trigger: 'blur' },
   ],
})

onMounted(() => { 
   CallCategoryApi()
  
})

const CallCategoryApi = () => { 
   CategoryApi.select.call().then((cateGorydata1: any) => { 
      // console.log(cateGorydata1);
      cateGorydata1.forEach((item:any) => {
         item.value = item.id
         item.label=item.name
      });
      const cateGorydata2 = cateGorydata1.reduce((hezi: any, currentvalue: any) => { 
            // console.log("z子类的id：", currentvalue);
            
         //拿到父类的节点
         currentvalue.children = cateGorydata1.filter((item: any) => { 
            return item.parentId === currentvalue.id
         })
         if (currentvalue.parentId === 0) { 
            hezi.push(currentvalue)
         }
         return hezi;
      },[])
      //console.log(cateGorydata2);
      cateGorydata.value= cateGorydata2
   })
}

//构建的方法
const formCategory = () => { 

   CategoryApi.insert.call({
      name: formData.name, img: formData.img, seq: formData.seq,
      parentId:formData.parentId
   }).then((res) => { 
      console.log(res);
         ElMessage.success("恭喜您！！添加成功")
      router.push({name:'category-list'})
   })


}

const submitForm = async (formEl:any) => {
   if (!formEl) return
   await formEl.validate((valid:any, fields:any) => {
      if (valid) {
         console.log('submit!')
         formCategory()
      } else {
         console.log('error submit!', fields)
      }
   })
}

const resetForm = (formEl:any) => {
   if (!formEl) return
   formEl.resetFields()
}

</script>
<style scoped>
.content{
   width: 86%;
   background-color: beige;
   border-radius: 6px;
   border: 1px solid silver;
   margin-top: 10px;
   margin-left: 50px;
}

</style>